<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>项目API统计</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <script type="text/javascript" src="../lib/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="../lib/echarts/echarts.theme.js"></script>
    <script type="text/javascript" src="../lib/echarts/world/js/china.js"></script>
    <link rel="stylesheet" href="../css/oksub.css" media="all" />


    <link rel="stylesheet" href="../css/jquery.jsonview.css" media="all" />

    <style>
        .project-one {
            cursor: pointer;
            display: block;
        }
        .api-lable{
            width:150px;
            margin-right: 15px;
            font-weight: bolder;
        }
        .api_response_code{
            background-color: #f0f0f0;
            padding: 10px;
        }
        .detail-bd{
            display:none;
        }
        .detail-open{
            background: #f3edd3;
        }
    </style>
</head>

<body class="ok-body-scroll console">
    <div class="ok-body home">
        <div class="layui-row" style="padding:15px">
            <h1 id="project-title">API统计</h1>
            <br>
            <div id="manager-bd">
                <a class="layui-btn layui-btn-normal layui-btn-sm" href="#" id="backBtn">
                    返回
                </a>
            </div>
        </div>

        <div class="layui-row layui-col-space15" style="padding:15px;" id="list-bd">
            <div class="layui-col-xs12 layui-col-md12">
                <div class="layui-tab" lay-filter="api">
                    <ul class="layui-tab-title">
                        <li class="layui-this">总览</li>
                        <li>详情</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <!--接口占用比例-->
                            <h2>接口占比</h2>
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-xs12 layui-col-md6" >
                                    <div id="proportion"></div>
                                </div>
                                <div class="layui-col-xs12 layui-col-md6">
                                    <div class="layui-row layui-col-space15">
                                        <div class="layui-col-xs12 layui-col-md3">
                                            <div class="layui-card">
                                                <div class="ok-card-body">
                                                    <div class="cart-r">
                                                        <div class="stat-text" id="second_num">0</div>
                                                        <div class="stat-heading">5秒请求数</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs12 layui-col-md3">
                                            <div class="layui-card ">
                                                <div class="ok-card-body">
                                                    <div class="cart-r">
                                                        <div class="stat-text" id="avg_qps">0.00</div>
                                                        <div class="stat-heading" >平均QPS</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <!--正常请求数量曲线-->
                            <h2>正常请求数量</h2>
                            <div id="request-curve" style="height: 300px;"></div>
                            <!--错误曲线-->
                            <h2>错误数量</h2>
                            <div id="error-curve"  style="height: 300px;"></div>
                        </div>


                        <div class="layui-tab-item">
                            <form class="layui-form" action="">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">来源</label>
                                        <div class="layui-input-inline" style="width: 200px;">
                                            <select name="user_from" lay-verify="" lay-search>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">标识</label>
                                        <div class="layui-input-inline" style="width: 200px;">
                                            <input type="text" name="user_identify" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <div class="layui-input-inline">
                                            <button class="layui-btn" lay-submit lay-filter="api_detail">搜索</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <br>
                            <!--搜索结果-->
                            <div class="api-detail-not-exists" style="display:none;">
                                <span style="color:red">查询不到数据</span>
                            </div>
                            <div class="api-detail-result" style="display:none;">

                                <table class="layui-table">
                                    <thead>
                                    <tr>
                                        <th>地址</th>
                                        <th>耗时</th>
                                        <th>结果</th>
                                        <th>时间</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="../lib/layui/layui.js"></script>
<script type="text/javascript" src="../js/projectApi.js"></script>
<script type="text/javascript" src="../js/jquery.jsonview.min.js"></script>